<template>
  <div class="exchange-item">
    <div class="exchange-body">
      <el-row class="row-head">
        <el-col :span="4">
          <el-button type="danger" @click="opert">操作</el-button>
        </el-col>
        <el-col :span="4">
          <el-button type="danger" @click="add">新增</el-button>
        </el-col>
      </el-row>
      <el-row class="row-body">
        <el-col :span="24">
          <el-table
            :data="tableData"
            stripe
            style="width: 100%"
            height="500"
            :row-style="{ height: '50px' }"
            :header-cell-style="{ background: '#ebf8f8' }"
          >
            <el-table-column prop="addtime" label="日期" width="180">
            </el-table-column>
            <el-table-column prop="code" label="兑换码"> </el-table-column>
            <el-table-column prop="exchangeday" label="兑换天数" align="center">
            </el-table-column>
            <el-table-column
              prop="allnumber"
              label="次数"
              width="180"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="surplusnumber"
              label="剩余次数"
              width="180"
              align="center"
            >
            </el-table-column>
            <el-table-column
              label="操作"
              v-if="isopert"
              align="center"
              header-align="center"
              fixed="right"
              width="240"
              class-name="btn-table-column"
            >
              <template #default="scope">
                <el-row class="cz-row">
                  <el-col :span="7"
                    ><el-button
                      type="primary"
                      size="small"
                      @click="openexchange(scope.row)"
                      >修改</el-button
                    ></el-col
                  >
                  <el-col :span="7">
                    <el-button
                      type="warning"
                      size="small"
                      @click="detailexchange(scope.row)"
                      >详情</el-button
                    ></el-col
                  >
                  <el-col :span="7">
                    <el-button
                      type="danger"
                      size="small"
                      @click="deletechange(scope.row)"
                      >删除</el-button
                    ></el-col
                  >
                </el-row>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
    </div>
    <el-dialog title="新增兑换码" v-model="dialogVisible" width="50%">
      <el-row>
        <el-col :span="12">
          <el-input placeholder="输入兑换码" v-model="exchangeinput" clearable>
            <template #prepend>
              <el-button @click="randomgeneration" class="guid-btn"
                >随机生成</el-button
              >
            </template>
          </el-input>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-input
            type="number"
            v-model="exchangenumber"
            oninput="if(value<=0)value=0"
          >
            <template #prepend> 兑换次数 </template></el-input
          >
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-input type="number" v-model="exday" oninput="if(value<=0)value=0">
            <template #prepend>兑换天数</template>
          </el-input>
        </el-col>
      </el-row>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="addcode">确 定</el-button>
        </span>
      </template>
    </el-dialog>
    <el-drawer
      title="兑换列表"
      v-model="drawer"
      direction="btt"
      size="300"
      class="table-drawer"
      :before-close="deletearray"
      destroy-on-close
    >
      <el-row class="choosecode-row">
        <el-col>
          <span><b>兑换码 : </b>{{ choosecode }}</span>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-table
            :data="excodelist"
            style="width: 100%"
            height="300"
            v-loading="tableloading"
          >
            <el-table-column prop="user" label="用户" width="200">
            </el-table-column>
            <el-table-column prop="codeday" label="兑换时间"> </el-table-column>
            <!-- <el-table-column prop="address" label="地址"> </el-table-column> -->
          </el-table>
        </el-col>
      </el-row>
    </el-drawer>
  </div>
</template>

<script>
import { addcode, getallcode, deletecode } from "network/request.js";

export default {
  inject: ["reload"],
  data() {
    return {
      tableData: [],
      isopert: false,
      dialogVisible: false,
      exchangeinput: "",
      exchangenumber: 0,
      exday: 0,
      excode: {
        code: "",
        allnumber: 0,
        surplusnumber: 0,
        addtime: "",
        exchangeday: 0,
      },
      excodelist: [],
      drawer: false,
      choosecode: "",
      tableloading: false,
    };
  },
  methods: {
    //打开操作列表
    opert() {
      // console.log(123);
      this.isopert = !this.isopert;
    },
    //新增兑换码
    add() {
      this.dialogVisible = true;
    },
    //发布兑换码
    addcode() {
      this.dialogVisible = false;
      let nowdate = new Date();
      nowdate = nowdate.toLocaleString();
      this.excode = {
        code: this.exchangeinput,
        allnumber: this.exchangenumber,
        surplusnumber: this.exchangenumber,
        addtime: nowdate,
        exchangeday: this.exday,
      };
      //调用addcode 上传兑换码
      addcode(this.excode).then(() => {
        //清空excode对象
        this.reload();
      });
    },
    //打开详情抽屉
    detailexchange(row) {
      this.drawer = true;
      this.choosecode = row.code;
      this.tableloading = true;
      getallcode(this.choosecode).then(({ data: res }) => {
        res[0].exchangeuser.forEach((item) => {
          this.excodelist.push(item);
        });
        setTimeout(() => {
          this.tableloading = false;
        }, 1000);
      });
    },
    deletearray(done) {
      // alert(123)
      this.excodelist = [];
      done()
    },
    deletechange(row) {
      console.log(row.id);
      deletecode(row.id).then(() => {
        alert("success");
        this.reload();
      });
    },
    //随机生成兑换码
    randomgeneration() {
      let code = this.Guid();
      this.exchangeinput = code;
    },
    //随机生成函数
    Guid() {
      var guid = "";
      for (var i = 1; i <= 16; i++) {
        var n = Math.floor(Math.random() * 16.0).toString(16);
        guid += n;
        // if (i == 8 || i == 12 || i == 16 || i == 20) guid += "-";
      }
      return guid;
    },
  },
  created() {
    getallcode().then(({ data: res }) => {
      // console.log(res)
      res.forEach((item) => {
        this.tableData.push(item);
      });
    });
  },
};
</script>

<style scoped lang="scss">
.exchange-item {
  width: 100%;
  height: 100%;
  padding-top: 20px;
  padding-bottom: 20px;
  // background-color: #fff;
  .exchange-body {
    max-width: 1100px;
    margin: 0 auto;
    // margin-top: 20px;
    background-color: #fff;
    height: 100%;
    padding: 30px 30px;
    .row-head {
      width: 100%;
      // background-color: red;
      .el-col {
        margin-right: 2%;
        .el-button {
          width: 100%;
        }
      }
    }
    .row-body {
      margin-top: 2%;
      width: 100%;
      height: 90%;
      //   background-color: yellow;
      .el-table {
        box-sizing: border-box;
        border: 1px solid #ddd;
        .btn-table-column {
          .cz-row {
            .el-col {
              margin-right: 2%;
              .el-button {
                width: 100%;
              }
            }
            .el-col:last-child {
              margin-right: 0;
            }
          }
        }
      }
    }
  }

  .el-dialog {
    .el-row {
      margin-bottom: 10px;
    }
    .guid-btn {
      width: 96px;
    }
  }
  .table-drawer >>> .el-drawer__header {
    margin-bottom: 0;
  }
  .choosecode-row {
    margin-bottom: 3%;
    color: #72767b;
  }
}
</style>